import { ElButton } from 'element-plus'
import { h } from 'vue'

import * as styles from './HelloWorldH.css'
import type { HelloWorldHRef } from './HelloWorldH.type'

export default function render(this: HelloWorldHRef) {
  return h('div', { class: styles.comp }, [
    h('h1', this.msg),
    h(
      'div',
      { class: 'card' },
      h(
        ElButton,
        { type: 'primary', onClick: this.handleCount },
        () => `count is ${this.count}`
      )
    ),
    h('p', { class: styles.readTheDocs }, 'This component is Hello World H'),
    this.$slots.extra?.(),
    h('p', `内部引用：${this.contentComputed}`)
  ])
}
